<template>
  <div class="domain-user">
    <index_top></index_top>
    <div class="container">
      <div class="user-head" :style="'background:url('+this.user.backImg+')'">
        <div class="user-exp-avatar-nickName">
          <div class="user-avatar-nickName">
            <div style="display:inline-block;">
              <img :src="this.user.avatar" class="user-avatar" />
              <span class="user-nickName">{{this.user.nickName }}</span>
              <i
                :title="this.user.nickName"
                class="user-ident"
                :style="this.user.bigV>0?islargV:''"
              ></i>
            </div>
            <div class="user-button">
              <el-button v-if="this.user.isFan==0" type="danger" icon="el-icon-plus" @click="attention(user.authorId,1)">关注</el-button>
              <el-button v-if="this.user.isFan==1" type="danger" icon="el-icon-check" @click="attention(user.authorId,0)">已关注</el-button>
              <el-button
                type="success"
                icon="el-icon-message"
                @click="sendMessage(user.authorId)"
              >发送私信</el-button>
            </div>
          </div>
          <div class="user-exp">
            <span>LV：{{this.user.level}}</span>
            <el-progress
              :text-inside="true"
              :stroke-width="18"
              :percentage="expPro(this.user.exp,this.user.nextLevelExp)"
              status="warning"
            ></el-progress>
            <span>LV：{{this.user.level+1}}</span>
          </div>
          <div class="user-buttom">
            <p>个性签名:{{this.user.perSign}}</p>
            <div>
              <p class="user-data">
                <span>动态：{{this.user.article}}</span>
                <span>评论：{{this.user.comment}}</span>
                <span>上次活跃：{{getDate(this.user.lastActiveTime)}}</span>
              </p>
              <p class="user-dy"></p>
              <p style="clear:both;"></p>
            </div>
          </div>
        </div>
      </div>
      <div class="domain-body">
        <div
          class="index_center_left"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="busy"
          infinite-scroll-distance="10"
          infinite-scroll-throttle-delay="80"
        >
          <!-- 文章列表 -->
          <div class="article-container" v-for="(article,index) in this.article_data" :key="index">
            <div class="article-cover">
              <a :href="'/detail?contentId='+article.id">
                <el-image
                  style="width: 100%;max-height: 110px;"
                  :src="article.cover"
                  fit="fit"
                  slot="placeholder"
                  :lazy="true"
                ></el-image>
              </a>
            </div>
            <div class="article-desc">
              <div class="artcle-title">
                <div class="artcle-tag">
                  <el-tag v-if="article.adminToping==1">置顶</el-tag>
                  <el-tag v-if="article.publisType==1" type="success">原创</el-tag>
                  <el-tag v-if="article.publisType==2" type="danger">转载</el-tag>
                </div>
                <a :href="'/detail?contentId='+article.id">
                  <h3>{{article.title}}</h3>
                </a>
              </div>
              <div class="artcle-description">{{article.artDesc}}</div>
            </div>
            <div class="article-info">
              <div class="article-info-left">
                <span>
                  <i class="el-icon-time"></i>
                  {{article.publishTime}}
                </span>
                <span>
                  <i class="el-icon-s-custom"></i>
                  {{article.user.nickName}}
                </span>
                <span>
                  <i class="el-icon-collection-tag">{{article.artType}}</i>
                </span>
              </div>
              <div class="article-info-right">
                <span>
                  <i class="el-icon-chat-dot-square">999</i>
                </span>
                <span>
                  <i class="el-icon-view">999</i>
                </span>
              </div>
            </div>
          </div>
          <div class="loading-data" v-if="data_loading">
            <span class="loading-data-icon">
              <i class="el-icon-loading"></i>
            </span>
            <span class="loading-data-font">加载中...</span>
          </div>
          <div class="no-moredata" v-if="no_moredata">
            <el-alert title="没有更多了" type="success" effect="dark" :center="true"></el-alert>
          </div>
        </div>
        <div class="index_center_right">
          <p class="right-box-title">历史成就</p>
          <div class="user-time_line">
            <p v-if="AccountAchiveMentList.length==0" style="text-align:center;">暂无数据</p>
            <el-timeline :reverse="true">
              <el-timeline-item
                v-for="(item,index) in AccountAchiveMentList"
                :key="index"
                color="#0bbd87"
                type="success"
                size="large"
                :timestamp="item.addtime"
              >
                <span v-if="item.type==1">等级已晋升为:{{item.content}}级</span>
                <span v-if="item.type==2">解锁成就《{{item.content}}》</span>
              </el-timeline-item>
            </el-timeline>
          </div>
          <el-divider></el-divider>
          <p class="right-box-title">最近访客</p>
          <div class="user-list">
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              @show="showUserDetail(itme.id)"
              v-for="(itme,index) in ZoneAccessList"
              :key="index"
            >
              <div v-loading="loading">
                <div class="user-list-detail-top">
                  <el-avatar :size="20" :src="ZoneUserDetail.avatar"></el-avatar>
                  <span style="color:red">{{ZoneUserDetail.nickName}}</span>
                  <i class="user-list-detail-ident" :style="ZoneUserDetail.bigV>0?islargV:''"></i>
                </div>
                <el-divider></el-divider>
                <div class="user-list-detail-center">
                  <div>
                    <p>{{ZoneUserDetail.article}}</p>
                    <p>内容</p>
                  </div>
                  <div>
                    <p>{{ZoneUserDetail.comment}}</p>
                    <p>评论</p>
                  </div>
                </div>
                <div style="clear:both;"></div>
                <el-divider></el-divider>
                <div class="user-list-detail-buttom">{{ZoneUserDetail.perSign}}</div>
              </div>
              <div slot="reference" class="user-list-item">
                <el-avatar :size="50" :src="itme.avatar"></el-avatar>
                <i class="user-list-ident" :style="itme.bigV>0?islargV:''"></i>
              </div>
            </el-popover>
          </div>
          <div style="clear:both;"></div>
          <el-divider></el-divider>
        </div>
      </div>
      <div style="clear:both"></div>
    </div>
  </div>
</template>

<script>
import index_top from "../index/index_top";
import { fetch, post } from "../../utils/httpRequest";
import { getDate, expPro } from "../../utils/funcUtil";
export default {
  data() {
    return {
      loading: false,
      islargV: {
        "background-position": "-50px -25px"
      },
      article_data: [],
      data_loading: false,
      no_moredata: false,
      busy: false,
      qyeryParam: {
        pageIndex: 0,
        pageSize: 10,
        author_id: 0
      },
      user: {
        article: 0,
        authorId: 0,
        avatar: "http://00-upload.gayligayqi.com/blog/avatar/default.jpg",
        backImg: "http://00-upload.gayligayqi.com/blog/headback/default.png",
        bigV: 0,
        comment: 0,
        exp: 0,
        isFan: 0,
        lastActiveTime: 1561967128000,
        level: 1,
        nextLevelExp: 5,
        nickName: "未知",
        perSign: "这个人很懒，什么也没有留下",
        vipLevel: 0
      },
      ZoneAccessList: [],
      ZoneUserDetail: {},
      AccountAchiveMentList: []
    };
  },
  components: {
    index_top
  },
  created: function() {
    if (this.$route.query.author_id) {
      this.qyeryParam.author_id = this.$route.query.author_id;
    }
    //用户数据
    this.getUserIndexData();
    //访问记录
    this.getZoneAccess();
    //历史成就
    this.getAccountAchiveMentLog();
  },
  methods: {
    getDate,
    expPro,
    getArticleList() {
      fetch(
        this.http.article_tourist.article.getUserArticle,
        this.qyeryParam
      ).then(response => {
        if (response.success) {
          if (response.data.records.length > 0) {
            this.article_data = this.article_data.concat(response.data.records);
            this.busy = false;
          } else {
            this.no_moredata = true;
          }
        }
        this.data_loading = false;
      });
    },
    loadMore() {
      if (!this.busy) {
        this.busy = true;
        this.data_loading = true;
        this.qyeryParam.pageIndex += 1;
        this.getArticleList();
      }
    },
    getUserIndexData() {
      fetch(this.http.account_tourist.getUserIndexData, {
        author_id: this.qyeryParam.author_id
      }).then(response => {
        if (response.data) {
          this.user = response.data;
        }
      });
    },
    getZoneAccess() {
      fetch(this.http.account_tourist.getZoneAccess, {
        zoneId: this.qyeryParam.author_id
      }).then(response => {
        if (response.success) {
          this.ZoneAccessList = response.data.records;
        }
      });
    },
    showUserDetail(author_id) {
      this.loading = true;
      fetch(this.http.account_tourist.getUserIndexData, {
        author_id: author_id
      }).then(response => {
        if (response.data) {
          this.ZoneUserDetail = response.data;
        }
        this.loading = false;
      });
    },
    getAccountAchiveMentLog() {
      fetch(this.http.account_tourist.getAccountAchiveMentLog, {
        author_id: this.qyeryParam.author_id
      }).then(response => {
        if (response.data) {
          this.AccountAchiveMentList = response.data.records;
        }
      });
    },
    sendMessage(author_id) {
      if (!this.$store.getters.loginData.islogin) {
        this.$notify.warning({
          title: "系统通知",
          message: "请登录"
        });
      } else {
        //添加到聊天窗口默认选中
        post(this.http.message.createMessageBox, { "author_id": author_id }).then(
          response => {
            if (response.success) {
              this.$store.state.choseChatBox = author_id;
              this.$store.state.showMessageBox = true;
            }
          }
        );
      }
    },
    attention(author_id,state) {
      post(this.http.account.subscrip.add, { "author_id": author_id,"stat":state}).then(
        response => {
          if (response.success) {
            this.$notify.success({
              title: "系统通知",
              message: "订阅成功"
            });
            this.user.isFan=state;
          }
        }
      );
    }
  }
};
</script>

<style scoped>
.user-button {
  display: inline-block;
}
.user-button button {
  margin-left: 0px;
  font-size: 10px;
  padding: 12px 8px;
}
.el-divider {
  margin: 5px 0px;
}
.user-list-detail-ident {
  display: inline-block;
  background-image: url(../../../static/images/icon.png);
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  vertical-align: -2px;
  background-position: -50px -75px;
}
.user-list-detail-center >>> div:nth-child(2) {
  border-left: 1px solid #ccc;
}
.user-list-detail-top >>> span,
.user-list-detail-top >>> i {
  vertical-align: middle;
}
.user-list-detail-center div {
  text-align: center;
  margin: 0px 3px;
  width: 45%;
  float: left;
}
.user-list-ident {
  display: inline-block;
  background-image: url(../../../static/images/icon.png);
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  vertical-align: -2px;
  background-position: -50px -75px;
  position: relative;
  top: -18px;
  left: 20px;
}
.user-list-item {
  margin: 5px 13px;
  width: 70px;
  height: 70px;
  float: left;
  text-align: center;
}
.right-box-title {
  text-align: center;
  margin: 10px 0px;
  color: white;
  border-left: 5px solid #ff9800;
  line-height: 50px;
  background: linear-gradient(to right, #3abeb3, rgb(232, 239, 175));
}
.user-time_line {
  margin-left: 15px;
}
.loading-data {
  text-align: center;
}
.domain-body {
  margin-top: 10px;
}
.domain-user {
  background: rgb(241, 241, 241);
}
.user-data {
  margin-top: 8px;
  float: left;
}
.user-dy {
  float: right;
  margin-right: 5px;
}
.user-data span {
  padding-right: 10px;
}
.user-buttom {
  color: white;
  margin-top: 5px;
}
.user-ident {
  display: inline-block;
  background-image: url(../../../static/images/icon.png);
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  vertical-align: -2px;
  background-position: -50px -75px;
  position: relative;
  top: 45px;
  left: -9%;
  z-index: 200;
}
.user-exp-avatar-nickName {
  margin-left: 10px;
}
.el-progress >>> .el-progress-bar__outer {
  background-color: #ccc;
}
.el-progress,
.el-progress >>> .el-progress-bar {
  display: inline-block;
  width: 250px;
}
.user-avatar-nickName {
  margin-left: 50px;
  padding: 10px 0px;
}
.user-head {
  height: 220px;
}
.user-exp {
  color: white;
}
.user-avatar {
  border-radius: 100%;
  height: 100px;
  width: 100px;
  vertical-align: middle;
  border: 5px solid white;
}
.user-nickName {
  background-color: white;
  padding: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-left: -8px;
}
.article-cover {
  width: 25%;
  float: left;
}
.article-desc {
  float: left;
  width: 75%;
}
.article-info {
  clear: both;
}
.article-info-left {
  float: left;
}
.article-info-right {
  float: right;
}
.artcle-tag {
  padding-right: 5px;
  float: left;
}
.artcle-title h3 {
  padding-top: 7px;
  vertical-align: middle;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.artcle-description {
  clear: both;
  text-indent: 2em;
  font-size: 12px;
  line-height: 20px;
  margin-top: 5px;
  margin-left: 5px;
  height: 80px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.artcle-title {
  margin-left: 5px;
}
.article-info-right,
.article-info-left > span {
  font-size: 12px;
  color: #ccc;
}
.article-info-left > span:nth-child(n + 2) {
  padding: 0px 15px;
}
.article-info-right > span:nth-child(1) {
  padding: 0px 15px;
}
.article-container {
  background-color: white;
  border-radius: 10px;
  height: 135px;
  padding: 10px;
  overflow: hidden;
  line-height: 20px;
  margin-bottom: 10px;
}
@media screen and (max-width: 1200px) {
  .index_center_right {
    display: none;
  }
  .user-ident {
    position: absolute;
    left: 150px;
  }
}
@media screen and (min-width: 1200px) {
  .index_center_left {
    width: 800px;
    float: left;
  }
  .index_center_right {
    float: left;
    margin-left: 15px;
    width: 385px;
  }
}
@media screen and (max-width: 500px) {
  .article-container {
    height: 95px;
  }
  .artcle-description {
    height: 42px;
  }
  .article-info-left > span:nth-child(n + 2) {
    padding: 0px 5px;
  }
  .article-info-right > span:nth-child(1) {
    padding: 0px 5px;
  }
  .user-ident {
    top: 18%;
  }
}
</style>

<style >
* {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 1200px) {
  .container {
    max-width: 1200px;
    margin: 0px auto;
  }
}
</style>

